<template>
	<el-collapse v-model="collapseValue">
		<el-collapse-item title="节点文本配置" name="1" class="node-text-config">
			<el-row align="middle">
				<el-col :span="8">字体大小</el-col>
				<el-col :span="12">
					<el-slider :min="8" :max="28" :step="1" v-model="textAttrs.fontSize" />
				</el-col>
				<el-col :span="2">
					<div class="result">{{ textAttrs.fontSize }}</div>
				</el-col>
			</el-row>
			<el-row align="middle">
				<el-col :span="8">字体颜粗细</el-col>
				<el-col :span="12">
					<el-slider :min="100" :max="900" :step="100" v-model="textAttrs.fontWeight" />
				</el-col>
				<el-col :span="2">
					<div class="result">{{ textAttrs.fontWeight }}</div>
				</el-col>
			</el-row>
			<el-row align="middle">
				<el-col :span="8">字体旋转</el-col>
				<el-col :span="14">
					<el-inputNumber
						v-model="rotateAttr"
						:step="1"
						:min="0"
						:max="360"
						style="width: 100%"
						controls-position="right"
					/>
				</el-col>
			</el-row>
			<el-row align="middle" class="mb6 mt6">
				<el-col :span="8">字体颜色</el-col>
				<el-col :span="14">
					<el-input type="color" v-model="textAttrs.fill" />
				</el-col>
			</el-row>
			<el-row align="middle">
				<el-col :span="8">文本</el-col>
				<el-col :span="14">
					<el-input v-model="textAttrs.text" type="textarea" :autosize="false" />
				</el-col>
			</el-row>
			<el-row align="middle" class="mb6 mt6">
				<el-col :span="8">X</el-col>
				<el-col :span="14">
					<el-inputNumber
						v-model="textAttrs.refX"
						:step="0.1"
						style="width: 100%"
						controls-position="right"
					/>
				</el-col>
			</el-row>
			<el-row align="middle">
				<el-col :span="8">Y</el-col>
				<el-col :span="14">
					<el-inputNumber
						v-model="textAttrs.refY"
						:step="0.1"
						style="width: 100%"
						controls-position="right"
					/>
				</el-col>
			</el-row>
		</el-collapse-item>
		<slot></slot>
	</el-collapse>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import { useVModel } from "@vueuse/core";
import type { IFlowGraphContext } from "../core/create";
import type { Attr } from "@antv/x6/lib/registry";

interface Props {
	context: Required<IFlowGraphContext>;
	activeCollapse?: string[];
}
interface Emit {
	(e: "update:activeCollapse", val: string[]): void;
}

const props = withDefaults(defineProps<Props>(), { activeCollapse: () => ["1"] });
const emit = defineEmits<Emit>();

const collapseValue = useVModel(props, "activeCollapse", emit);

// 节点文本属性
const textAttrs = ref<Attr.ComplexAttrs>({});
// 单独处理字体的旋转
const rotateAttr = ref(0);

const getLabelAttrs = () => {
	const { activeCell } = props.context;
	const label = activeCell.value.getAttrs().label;
	label.refX = parseInt(label.refX as string, 10);
	label.refY = parseInt(label.refY as string, 10);
	return label;
};

const transformLabelAttrs = (attrs: Attr.ComplexAttrs) => {
	attrs.refX = attrs.refX + "%";
	attrs.refY = attrs.refY + "%";
	return attrs;
};

watch(
	textAttrs,
	(val) => {
		const node = props.context.activeCell.value;
		node.setAttrs({ label: transformLabelAttrs({ ...val }) });
	},
	{ deep: true }
);

watch(
	props.context.activeCell,
	async () => {
		textAttrs.value = getLabelAttrs();
	},
	{ immediate: true }
);
</script>

<style lang="scss" scoped>
.node-text-config {
	:deep(.el-collapse-item__header) {
		color: #666;
		font-weight: 600;
		font-size: 16px;
	}
	.result {
		margin-left: 13px;
	}
}
</style>
